<script setup lang="ts">
import { ref } from 'vue';
const collapsed = ref<boolean>(false);
import LeftMenu from '../components/LeftMenu.vue'
import AdminHeader from '../components/AdminHeader.vue'
</script>

<template>
  <div class="w-full h-screen bg-white overflow-hidden">
    <a-layout class="mx-auto h-full">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :style="{ backgroundColor: '#ffffff'}">
        <div class=" flex items-center ml-4" >
          <img src="/src/assets/imgs/logo.png" alt="网站图标" class="w-14 h-14 mr-2">
          <h1 class="h-14 text-base  pt-6" v-show="!collapsed">HZIEE OJ</h1>
        </div>
        <LeftMenu />
      </a-layout-sider>
      <a-layout class="flex flex-col h-full">
        <a-layout-header style="background: #fff; padding: 0">
          <AdminHeader :collapsed="collapsed" @toggle-collapsed="collapsed = !collapsed" />
        </a-layout-header>
        <a-layout-content
          :style="{ margin: '24px 16px', overflow: 'hidden', flex: 1 }"
        >
         <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<style scoped>


</style>
